<template>
  <div class="team-list">
    <head-top head-title="监理"></head-top>
    <div class="btn-list">
      <a href="/Breaked" class="go_break">
        <div class="break_btn">
          <div class="yun-da">
            <span>请 假</span>
            <p style="height: 10px"></p>
            <span>调 休</span>
          </div>
        </div>
      </a>
      <a href="/Clocked" v-if="status===1" class="go_clock">
        <div class="clock_btn">
          <div class="yun-da">
            <span>员 工</span>
            <p style="height: 10px"></p>
            <span>打 卡</span>
          </div>
        </div>
      </a>
      <a @click="$router.push('/Looked')" v-if="status===1" class="go_look">
        <div class="look_btn">
          <div class="yun-da">
            <span>管 理</span>
            <p style="height: 10px"></p>
            <span>审 核</span>
          </div>
        </div>
      </a>
    </div>
    <div v-if="status===1" style="height: 100px"></div>
    <div class="group" v-for="(item,index) in teamList" :key="index" v-show="teamList">
      <div class="title">
        <span>{{item.department}}</span>
        <span @click="$router.push('/TeamAll/' + item.department)">查看全部</span>
      </div>
      <div class="list-wrapper">
        <div class="wrapper">
          <mt-cell :title="li.name" :to="'/TeamDetail/'+li.id" v-if="item.department === li.department"
                   v-for="(li,index) in list" :key="index">
            <span>
              <img src="./images/zaixian@2x.png" alt="" width="36" height="36" v-show="li.status===1">
              <img src="./images/yilikai@2x.png" alt="" width="36" height="36" v-show="li.status===0">
            </span>
            <img v-show="li.head_img" class="touxiang" slot="icon" v-lazy="li.head_img" width="40" height="40">
            <span v-show="!li.head_img" class="head-bg" slot="icon">{{li.bgName}}</span>
          </mt-cell>
        </div>
      </div>
    </div>
    <!-- <p v-if="noTeam === 400" style="padding-top:250px; text-align: center; font-size:20px;">您不是该小区业主或员工，查看不了</p> -->

    <div class="no-team" v-if="noTeam === 400">
      <div>您不是该小区业主或员工，查看不了</div>
    </div>
    <v-footer></v-footer>
  </div>
</template>
<style lang="scss">
  .team-list {
    background-color: #fff;
    padding-top: 40px;
    padding-bottom: 60px;
    position: relative;
    .no-team{
      height: 400px;
      font-size: 16px;
      display: flex;
      text-align: center;
      align-items: center;
      div{
        flex:1
      }
    }
    .btn-list {
      width: 100%;
      position: fixed;
      background: #fff;
      height: 90px;
      z-index: 2;
      top: 90px;
      text-align: center;
      .go_break {
        width: 30%;
        .break_btn {
          position: relative;
          width: 70px;
          height: 70px;
          border-radius: 50%;
          background: #ea8943;
          display: inline-block;
          margin-top: 10px;
          .yun-da {
            position: absolute;
            top: 35px;
            left: 35px;
            transform: translate(-50%, -50%);
            font-size: 13px;
            color: #fff;
          }
        }
      }
      .go_clock {
        width: 30%;
        padding: 0 50px;
        .clock_btn {
          position: relative;
          width: 70px;
          height: 70px;
          border-radius: 50%;
          background: #0078DE;
          display: inline-block;
          margin-top: 10px;
          .yun-da {
            position: absolute;
            top: 35px;
            left: 35px;
            transform: translate(-50%, -50%);
            font-size: 13px;
            color: #fff;
          }
        }
      }
      .go_look {
        width: 30%;
        .look_btn {
          position: relative;
          width: 70px;
          height: 70px;
          border-radius: 50%;
          background: #b76ef6;
          display: inline-block;
          margin-top: 10px;
          .yun-da {
            position: absolute;
            top: 35px;
            left: 35px;
            transform: translate(-50%, -50%);
            font-size: 13px;
            color: #fff;
          }
        }
      }
    }
    .group {
      width: 100%;
      .title {
        padding: 0 10px;
        // display: flex;
        height: 33px;
        line-height: 33px;
        background-color: #f2f2f2;
        // align-items: center
        span {
          &:last-child {
            float: right;
            color: #0078de;
          }
        }
      }
      .touxiang {
        border-radius: 50%;
      }
      .list-wrapper {
        .wrapper {
          margin: 0 10px;
          .head-bg {
            display: inline-block;
            text-align: center;
            line-height: 40px;
            width: 40px;
            height: 40px;
            background-color: #0078de;
            border-radius: 50%;
            color: #fff;
            font-size: 12px;
          }
          .mint-cell {
            width: 100%;
            background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            &:last-child {
              background-size: 100% 0px;
            }
          }
          .mint-cell-wrapper {
            background-size: 100% 0px;
            padding: 0;
          }
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import Footer from '../footer/Footer.vue'
  import { getTeamList } from '../../api/jianli.js'
  import { Indicator } from 'mint-ui'

  export default {
    name: 'TeamList',
    data () {
      return {
        teamList: [],
        list: [],
        status: '',
        noTeam: ''
      }
    },
    components: {
      headTop,
      'v-footer': Footer
    },
    created () {
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      })
      this._getTeamList()
      setTimeout(function () {
        Indicator.close()
      }, 5000)
    },
    methods: {
      _getTeamList () {
        var list = []
        getTeamList().then(res => {
          if (res.code === 200) {
            this.teamList = res.data.data
            this.status = res.data.status
            this.teamList.forEach((item, index) => {
              for (var key in item) {
                if (!isNaN(parseInt(key))) {
                  list.push(item[key])
                }
              }
            })
            this.list = list
            this.list.forEach(list => {
              this.$set(list, 'bgName', list.name.substring(list.name.length - 2))
            })
            Indicator.close()
          } else if (res.code === 400) {
            this.noTeam = res.code
            Indicator.close()
          }
        })
      }
    }
  }
</script>
